<template>
  <t-card :title="$t('pages.dashboardBase.category.title')" :bordered="false">
    <div id="countContainer" class="chart-container" />
  </t-card>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/core';
import { nextTick } from 'vue';

import { getPieChartDataSet } from '../index';

let countContainer: HTMLElement;
let countChart: echarts.ECharts;
const renderCountChart = (data: any[]) => {
  if (!countContainer) {
    countContainer = document.getElementById('countContainer');
  }
  countChart = echarts.init(countContainer);
  countChart.setOption(getPieChartDataSet(data));
};

const updateContainer = () => {
  countChart.resize();
};

const render = (data: any[]) => {
  renderCountChart(data);
  nextTick(() => {
    updateContainer();
  });
};

defineExpose({
  render,
});
</script>

<style lang="less" scoped>
.chart-container {
  height: 326px;
}
.t-card {
  :deep(.t-card__body) {
    padding-top: 0;
  }
}
</style>
